<template>
  <view class="product-list">
    <template v-if="list.length > 0">
      <view class="product-item" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
        <view class="image" v-if="item.mainImage">
          <!--<image width="100rpx" height="100rpx" mode="widthFix" :src="baseUrl + item.mainImage.path" />-->
          <u--image width="300rpx" height="300rpx" mode="widthFix" lazy-load :fade="true" duration="450" :src="baseUrl + item.mainImage.path"></u--image>
        </view>
        <view class="title two-lines">{{ item.title }}</view>
        <!--<group v-if="item.area && item.area[0] && item.area[0].area_id === 5"-->
        <!--       :price="parseFloat(item.price)" :group-price="parseFloat(item.price_group)" class="price" />-->
        <price :price="parseFloat(item.price)" :old-price="parseFloat(item.price_old)" class="price" />
        <!--<view class="set">-->
        <!--  <text class="d">购买省:￥{{ setMyself(item) }}</text>-->
        <!--  <text class="d">分享赚:￥{{ setReferrer(item) }}</text>-->
        <!--</view>-->
        <view class="sell">已售: {{ item.sell_count }}</view>
      </view>
    </template>
    <view class="nothing" v-else-if="showNothing">暂无商品...</view>
  </view>
</template>

<script>
import Price from '../../components/price/index'
import Group from '../../components/price/group'
import config from '../../config/config'
import base64 from '../../util/base64'
import Product from '../../api/product'
const productModel = new Product()
export default {
  components: {
    Price,
    Group
  },
  props: {
    list: {
      type: Array,
      default: []
    },
    showNothing: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      baseUrl: config.baseUrl,
      set: {}
    }
  },
  methods: {
    goDetail(item) {
      uni.navigateTo({
        url: `/sub_product/detail/index?id=${item.id}`
      })
    },
    setMyself(v) {
      return +(v.price * this.set.buy_myself / 100).toFixed(2)
    },
    setReferrer(v) {
      return +(v.price * this.set.buy_referrer / 100).toFixed(2)
    }
  },
  watch: {
    // list: (v) => {
    //   console.log(v)
    // }
  },
  created() {
    productModel.getSet().then(response => {
      let { data } = response
      data = base64.parse(data)
      // console.log(data)
      this.set = data.set
    })
  }
}
</script>

<style scoped lang="scss">
.product-list {
  display: flex;
  //margin: 20rpx;
  justify-content: space-between;
  flex-wrap: wrap;
  .product-item {
    padding: 20rpx;
    border-radius: 20rpx;
    background: white;
    margin-bottom: 10rpx;
    width: calc(50% - 5rpx);
    box-sizing: border-box;
    .image {
      padding: 0rpx 0 10rpx 0;
      //background: red;
      //max-height: 300rpx;
      //width: 300rpx;
      margin: 0 auto;
      box-sizing: border-box;
      image {
        display: block;
        width: 100%;
        height: 100%;
        margin: auto;
      }
    }
    .title {
      font-weight: 700;
      font-size: 26rpx;
      //line-height: 44rpx;
    }
    .set {
      font-size: 24rpx;
      color: #333333;
      margin-bottom: 5px;
      display: flex;
      flex-direction: column;
      text {
        margin-right: 24rpx;
      }
    }
    .sell {
      font-size: 24rpx;
      color: #ccc;
    }
  }
  .nothing {
    text-align: center;
    width: 100%;
    background: white;
    font-size: 24rpx;
    line-height: 100px;
    color: #ccc;
    margin-bottom: 10px;
    border-radius: 10rpx;
  }
}
</style>
